<template>
  <div class="video">
    <div class="video-box">
      <el-button type="info" icon="el-icon-close" class="errorBtn" @click="$emit('onClose')"></el-button>
      <span v-show="!videourl" style="margin-left:20%;color:#fff">视频加载失败，请稍后再试</span>
      <span v-show="!videourl" v-loading="laoding"></span>
      <video :src="videourl" class="myVideo" autoplay style="width:100%;height:100%"></video>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    videourl: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      laoding: true
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.video {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  .video-box {
    position: absolute;
    top: 40%;
    left: 45%;
    transform: translate(-50%, -50%);
    .errorBtn {
      opacity: 0.5;
      padding: 20px;
      font-size: 20px;
      border-radius: 50%;
      position: absolute;
      top: -84px;
      left: 45%;
      animation: errorBtn 1s;
      @keyframes errorBtn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: .3;
        }
      }
    }
  }
}

.myVideo {
  animation: animations 1s;
  @keyframes animations {
    0% {
      width: 0%;
      height: 0%;
      opacity: 0;
    }
    100% {
      width: 100%;
      height: 100%;
      opacity: 1;
    }
  }
}
</style>
